<script setup lang="ts">
import { ref, nextTick } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { isAllEmpty } from "@pureadmin/utils";
import { useStore } from "../utils/hook";
import { DictSelect } from "@/components/common/DictSelect";

const { options1 } = useStore();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: undefined,
    supplierName: undefined,
    contacts: undefined,
    contact: undefined,
    type: undefined,
    supplierCode: undefined,
    website: undefined,
    address: undefined,
    labelIdList: undefined,
    des: undefined
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const options = [
  {
    value: 0,
    label: "普通供应商"
  },
  {
    value: 1,
    label: "1688供应商"
  }
];

/** 动态编辑标签 */
const size = ref("default");
const inputValue = ref("");
const dynamicTags = ref([]);
const inputVisible = ref(false);
const InputRef = ref();
const handleDynamicClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};
const handleInputConfirm = () => {
  if (!isAllEmpty(inputValue.value)) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input
            v-model="newFormInline.supplierName"
            clearable
            placeholder="请输入供应商名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="newFormInline.contacts"
            clearable
            placeholder="请输入联系人"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="newFormInline.contact"
            clearable
            placeholder="请输入联系方式"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="供应商类型" prop="type">
          <DictSelect
            v-model="newFormInline.type"
            dict-type="SUPPLIER_TYPE"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="供应商标签" prop="labelIdList">
          <el-select
            v-model="newFormInline.labelIdList"
            multiple
            placeholder="请选择供应商标签"
            clearable
            filterable
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.labelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="供应商编码" prop="supplierCode">
          <el-input
            v-model="newFormInline.supplierCode"
            clearable
            placeholder="请输入供应商编码"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="网站网址" prop="website">
          <el-input
            v-model="newFormInline.website"
            clearable
            placeholder="请输入网站网址"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="false">
      <el-col :span="16" class="m-auto">
        <el-form-item label="供应商标签" prop="">
          <el-tag
            v-for="tag in dynamicTags"
            :key="tag"
            class="mx-1"
            closable
            :size="size as any"
            :disable-transitions="false"
            @close="handleDynamicClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="ml-1 !w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="button-new-tag ml-1"
            size="small"
            @click="showInput"
          >
            新建标签
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto" prop="des">
        <el-form-item label="备注">
          <el-input
            v-model="newFormInline.des"
            placeholder="请输入备注信息"
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
